import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import React, { Component } from 'react'
import { StatusBar, View, StyleSheet, Text, ScrollView, TextInput, TouchableOpacity, Button, Image } from 'react-native'
import AntDesign from "react-native-vector-icons/AntDesign"
import Feather from "react-native-vector-icons/Feather"
import Player from './MusicPlayer'
import Collection from './Collection'
import Member from './Member'
import Hall from './Hall'
let Tab = createBottomTabNavigator()

export default class App extends Component {


    state = { user: {} }

    _screen = ({ route }) => {
        let iconName;
        return {
            tabBarIcon: ({ color }) => {
                switch (route.name) {
                    case "我喜欢":
                        iconName = "smileo"
                        break;
                    case "正在播放":
                        iconName = 'customerservice'
                        break;
                    case "音乐馆":
                        iconName = 'appstore-o'
                        break;
                    case "制作团队":
                        iconName = "team"
                        break;
                }
                return <AntDesign name={iconName} size={30} color={color} />
            }
        }
    }
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ height: 55, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: "#f0f0f0" }}>
                    <View style={{ width: 44, height: 44, alignSelf: 'flex-start', backgroundColor: 'red', marginTop: 5, marginLeft: 5 }}>
                    <Image style={{ width: 44, height: 44}} source={require('./picture/logo.png')}/>

                    </View>
                    <Text style={{ fontSize: 20, color: 'blue' }}>北城之音</Text>
                    <TextInput style={{ width: 180, height: 40, backgroundColor: 'white' }} placeholder="搜索" />
                    {/* 点击跳转到登录页面 */}
                    <TouchableOpacity onPress={() => { this.props.navigation.navigate("用户登录") }}>
                        <Text style={{ width: 50, fontSize: 15, marginRight: 5 }} numberOfLines={1}> {this.state.user === null ? "请登录" : this.state.user.name}Khino</Text>

                    </TouchableOpacity>

                </View>
                <StatusBar hidden={true} />
                <Tab.Navigator sceneContainerStyle={{ paddingBottom: 70 }} screenOptions={this._screen} tabBarOptions={{ activeTintColor: 'blue', labelStyle: { fontSize: 15 }, style: { height: 70, position: 'absolute', end: 0 } }}>
                    <Tab.Screen name="正在播放" component={Player} />
                    <Tab.Screen name="我喜欢" component={Collection} />
                    <Tab.Screen name="音乐馆" component={Hall} />
                    <Tab.Screen name="制作团队" component={Member} />
                </Tab.Navigator>
            </View>
        )
    }
}
